<template>
	<view
	:class="classes"
	:style="{
		boxSizing: 'border-box',
		width: width + 'rpx',
		height: height + 'rpx',
		borderRadius: borderRadius + 'rpx',
		fontSize: fontSize + 'rpx',
		border: '1rpx solid rgba(0,0,0,0)',
		borderWidth: borderWidth + 'rpx',
		borderColor,
		color,
		background: disabled ? disabledBgColor : background,
	}"
	@click="!disabled && $emit('click')"
	>
		<view
		class="flex-center-center u-text-center"
		:style="{ height: '100%' }">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			classes: {
				default: ''
			},
			width: {
				type: [Number, String],
				default: 640
			},
			height: {
				type: [Number, String],
				default: 88
			},
			color: {
				type: [String],
				default: '#FFFFFF'
			},
			background: {
				type: [String],
				default: 'linear-gradient(to right, #F94404 0%, #FD164F 100%)'
			},
			borderWidth: {
				type: [Number, String],
				default: 2
			},
			borderColor: {
				type: [String],
				default: 'rgba(0,0,0,0)'
			},
			borderRadius: {
				type: [Number, String],
				default: 100
			},
			boxShadow: {
				type: String,
				default: 'none'
			},
			disabled: {
				defaultL: false,
			},
			disabledBgColor: {
				default: '#ddd'
			},
			fontSize: {
				type: [Number, String],
				default: 30
			}
		},
		data() {
			return {}
		}
	}
</script>

<style>
</style>
